<template>
  <div class="job-detail-content">
    <Banner :data="talentDetailData" @collect-change="getTalenDetailData" />
    <Container
      class="job-detail-content-container"
      padding-top="48px"
      bg-color="#F5F8FA"
    >
      <div class="card">
        <div class="title">职位描述</div>
        <div class="divider-line"></div>
        <div class="detail" v-if="talentDetailData?.content" v-html="talentDetailData.content"></div>
        <template v-else>
          <div class="pc-skeleton">
            <Skeleton :rows="4" gap-skeleton></Skeleton>
            <Skeleton :rows="4"></Skeleton>
          </div>
          <div class="mobile-skeleton">
            <Skeleton :rows="5" mobile></Skeleton>
          </div>
        </template>
      </div>
      <div class="card" style="margin-top: 24px">
        <div class="title">更多岗位推荐</div>
        <div class="divider-line"></div>
        <JobList
          title=""
          desc=""
          :data="talentListData?.data"
          :count="10"
        ></JobList>
      </div>
    </Container>
  </div>
</template>

<script setup lang="ts">
import Banner from "./banner.vue";
import { useRoute } from "vue-router";
import { onMounted, reactive, ref } from "vue";
import { postTalentDetail, postTalentList } from "../../../api/talent";
import type { TalentDetail, TalentItem } from "../../../types/talent";
import type { PageResult } from "../../../types/global";
const route = useRoute();
const getTalenDetailData = async () => {
  getTalentListData()
  let res =await postTalentDetail(route.query.id)
  if(res.code === 200) {
    talentDetailData.value = res.data
    
  }
};
let talentDetailData = ref<TalentDetail>();
let talentListParams = reactive({
  cat_id: "",
  air_id: "",
  position_id: "",
  address_id: "",
  salary_id: "",
  work_id: "",
  cert_id: "",
  edu_id: "",
  tag_id: "",
  title: "",
  rows: 10,
  page: 1,
});
let talentListData = ref<PageResult<TalentItem[]>>();
const getTalentListData = async () => {
  let res= await postTalentList({rows:9})
  if(res.code === 200) {
    talentListData.value = res.data
  }
}

onMounted(() => {
  getTalenDetailData()
});
</script>
<style scoped lang="less">
.card > .title {
  color: #172026;
  font-size: 16px;
}
.divider-line {
  margin-bottom: 24px;
}
.detail {
  font-size: 14px;
  color: #36434d;
}
.detail-item {
  margin-top: 24px;
}

@media screen and (max-width: 768px) {
  .job-detail-content-container {
    background-color: #fff !important;
    .card {
      padding: 0;
      & > .title {
        font-size: 82px;
        margin-bottom: 82px;
      }
    }
    .divider-line {
      display: none;
    }
    .detail-item,
    .detail {
      font-size: 72px;
    }
  }
}
</style>
